packages/web/src/components/FlowCanvas.tsx (1)

346-352: ⚡ Quick win

Honor prefers-reduced-motion for camera transitions.

These 500ms setCenter tweens now run on every focus/overview change with no reduced-motion fallback. Please switch duration to 0 when the user has prefers-reduced-motion: reduce enabled.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/web/src/components/FlowCanvas.tsx` around lines 346 - 352, The
moveTo function currently always passes duration: 500 to reactFlow.setCenter;
change it to respect the user's prefers-reduced-motion setting by querying
window.matchMedia('(prefers-reduced-motion: reduce)').matches and use duration:
0 when true (otherwise 500). Update the call in moveTo (the reactFlow.setCenter
invocation) to compute a duration variable based on that media query so camera
transitions are disabled for users who prefer reduced motion.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

packages/web/src/components/FlowCanvas.tsx (1)

202-210: ⚡ Quick win

Throttle resize-driven viewport updates to one frame.

During panel width transitions, ResizeObserver can fire many times in quick succession; running fitToPane() + setPaneResizeTick() each callback can cause avoidable camera churn.

Proposed patch

   useEffect(() => {
     const pane = containerRef.current?.querySelector('.react-flow') as HTMLElement | null
     if (!pane || typeof ResizeObserver === 'undefined') return
+    let rafId: number | null = null
+    let pending = false
     const observer = new ResizeObserver(() => {
-      fitToPane()
-      // Force the auto-zoom effect to re-apply: clear the focus guard
-      // and bump the tick that the effect depends on. Together they
-      // make resize-triggered fitToPane() not the last word during
-      // playback.
-      lastFocusKeyRef.current = ''
-      setPaneResizeTick((t) => t + 1)
+      if (pending) return
+      pending = true
+      rafId = window.requestAnimationFrame(() => {
+        pending = false
+        fitToPane()
+        // Force the auto-zoom effect to re-apply: clear the focus guard
+        // and bump the tick that the effect depends on.
+        lastFocusKeyRef.current = ''
+        setPaneResizeTick((t) => t + 1)
+      })
     })
     observer.observe(pane)
-    return () => observer.disconnect()
+    return () => {
+      observer.disconnect()
+      if (rafId !== null) window.cancelAnimationFrame(rafId)
+    }
   }, [fitToPane])

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/web/src/components/FlowCanvas.tsx` around lines 202 - 210, Throttle
the ResizeObserver callback to at most one animation frame: instead of calling
fitToPane(), clearing lastFocusKeyRef.current and setPaneResizeTick() on every
ResizeObserver event, schedule a single requestAnimationFrame (store its id in a
local/ref variable) and only run the three actions inside that raf handler,
ignoring additional ResizeObserver callbacks until the scheduled frame runs (and
cancel any existing raf when scheduling a new one if desired). Update the
ResizeObserver creation code that currently references fitToPane,
lastFocusKeyRef, and setPaneResizeTick to use this raf-based throttle and ensure
you clear the raf on cleanup.